Create a User-Friendly Airline Booking Form with HTML/CSS (Source Code)

By Faraz - March 30, 2024

Learn how to design and code a seamless airline booking form using HTML and CSS. Follow our tutorial for a smooth flight reservation experience!

Join us on Telegram

Create a User-Friendly Airline Booking Form with HTML and CSS.webp

Read Also

Creating Skeleton Loading Using HTML and CSS (Source Code Included)

In the realm of online travel, a smooth booking experience is paramount. An airline booking form serves as the gateway for travelers to secure their flights conveniently. Seamlessly integrating user-friendly design with efficient functionality, these forms streamline the reservation process, making it hassle-free for users to input their travel details and preferences. In this guide, we'll delve into the creation of an airline booking form using HTML and CSS, ensuring a seamless journey for both developers and users alike.

Source Code

Step 1 (HTML Code):

Setting Up the HTML Structure:

Start by creating a new HTML file.
Use semantic HTML elements for better accessibility and SEO.
Structure the form with appropriate inputs for flight details, passenger information, and contact details.

Here's a breakdown of HTML structure and elements:

1. <!DOCTYPE html>: This declaration specifies the document type and version of HTML used in the document.

2. <html lang="en">: The root element of the HTML document, with the lang attribute specifying the language as English.

3. <head>: Contains meta-information about the HTML document, such as character encoding, viewport settings, and the document's title.

<meta charset="UTF-8">: Sets the character encoding to UTF-8, which supports a wide range of characters and languages.
<meta http-equiv="X-UA-Compatible" content="IE=edge">: Ensures compatibility with the latest version of Internet Explorer.
<meta name="viewport" content="width=device-width, initial-scale=1.0">: Configures the viewport for responsive design on various devices.
<title>Airline Booking Form</title>: Sets the title of the HTML document.
<link rel="stylesheet" href="styles.css">: Links an external CSS stylesheet for styling the HTML document.

4. <body>: Contains the visible content of the HTML document.

<div class="booking-form-w3layouts">: A container for the booking form.
<form action="#" method="post">: The form element with attributes specifying the form's action and method (post).
Various form fields for inputting booking details such as origin, destination, preferred airline, departure date, departure time, number of adults, children, infants, fare type (one-way or round-trip), return date, return time, and a message field.
Input fields for personal details such as full name, phone number, and email address.
<input type="submit" value="Submit">: A submit button to send the form data.
<input type="reset" value="Clear Form">: A reset button to clear the form data.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Airline Booking Form</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="booking-form-w3layouts">
  <!-- Form starts here -->
  <form action="#" method="post">
    <h2 class="sub-heading-agileits">Booking Details</h2>
    <div class="main-flex-w3ls-sectns">
      <div class="field-agileinfo-spc form-w3-agile-text1">
        <select class="form-control">
                  <option>From</option>
                  <option value="Lorem Ipsum">Lorem Ipsum</option>
                  <option value="Adipiscing">Adipiscing</option>
                  <option value="Lorem Ipsum">Lorem Ipsum</option>
                  <option value="Adipiscing">Adipiscing</option>
                  <option value="Lorem Ipsum">Lorem Ipsum</option>
                  <option value="Adipiscing">Adipiscing</option>
                </select>
      </div>
      <div class="field-agileinfo-spc form-w3-agile-text2">
        <select class="form-control">
                  <option>To</option>
                  <option value="Lorem Ipsum">Lorem Ipsum</option>
                  <option value="Adipiscing">Adipiscing</option>
                  <option value="Lorem Ipsum">Lorem Ipsum</option>
                  <option value="Adipiscing">Adipiscing</option>
                  <option value="Lorem Ipsum">Lorem Ipsum</option>
                  <option value="Adipiscing">Adipiscing</option>
                </select>
      </div>
    </div>
    <div class="main-flex-w3ls-sectns">
      <div class="field-agileinfo-spc form-w3-agile-text1">
        <select class="form-control">
                  <option>Preferred Airline</option>
                  <option value="American Airline">American Airline</option>
                  <option value="Delta Airlines">Delta Airlines</option>
                  <option value="Frontier Airline">Frontier Airline</option>
                  <option value="Jet Blue">Jet Blue</option>
                  <option value="Southwest Airlines">Southwest Airlines</option>
                </select>
      </div>
      <div class="field-agileinfo-spc form-w3-agile-text2">
        <select class="form-control">
                  <option>Preferred Seating</option>
                  <option value="Window">Window</option>
                  <option value="Aisle">Aisle</option>
                  <option value="Special">Special (Request note below)</option>
                </select>
      </div>
    </div>
    <div class="main-flex-w3ls-sectns">
      <div class="field-agileinfo-spc form-w3-agile-text1">
        <input id="datepicker" name="Text" type="text" placeholder="Departure Date" value="" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'mm/dd/yyyy';}" required="" class="hasDatepicker">
      </div>
      <div class="field-agileinfo-spc form-w3-agile-text2">
        <input type="text" id="timepicker" name="Time" class="timepicker form-control hasWickedpicker" placeholder="Departure Time" value="" onkeypress="return false;">
      </div>
    </div>

    <div class="triple-wthree">
      <div class="field-agileinfo-spc form-w3-agile-text11">
        <select class="form-control">
                      <option value="">Adult(12+ Yrs)</option>
                      <option value="1">1</option>
                      <option value="2">2</option>
                      <option value="3">3</option>         
                      <option value="4">4</option>
                      <option value="5">5+</option>
                    </select>
      </div>
      <div class="field-agileinfo-spc form-w3-agile-text22">
        <select class="form-control">
                      <option value="">Children(2-11 Yrs)</option>
                      <option value="1">1</option>
                      <option value="2">2</option>
                      <option value="3">3</option>         
                      <option value="4">4</option>
                      <option value="5">5+</option>     
                    </select>
      </div>
      <div class="field-agileinfo-spc form-w3-agile-text33">
        <select class="form-control">
                      <option value="">Infant(under 2Yrs)</option>
                      <option value="1">1</option>
                      <option value="2">2</option>
                      <option value="3">3</option>         
                      <option value="4">4</option>
                      <option value="5">5+</option>    
                    </select>
      </div>
    </div>
    <div class="radio-section">
      <h6>Select your Fare</h6>
      <ul class="radio-buttons-w3-agileits">
        <li>
          <input type="radio" id="a-option" name="selector1">
          <label for="a-option">One Way</label>
          <div class="check"></div>
        </li>
        <li>
          <input type="radio" id="b-option" name="selector1">
          <label for="b-option">Round-Trip</label>
          <div class="check">
            <div class="inside"></div>
          </div>
        </li>
      </ul>
      <div class="clear"></div>
    </div>
    <div class="main-flex-w3ls-sectns">
      <div class="field-agileinfo-spc form-w3-agile-text1">
        <input id="datepicker1" name="Text" type="text" placeholder="Return Date" value="" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'mm/dd/yyyy';}" required="" class="hasDatepicker">
      </div>
      <div class="field-agileinfo-spc form-w3-agile-text2">
        <input type="text" id="timepicker1" name="Time" class="timepicker form-control hasWickedpicker" placeholder="Return Time" value="" onkeypress="return false;">
      </div>
    </div>
    <div class="field-agileinfo-spc form-w3-agile-text">
      <textarea name="Message" placeholder="Any Message..."></textarea>
    </div>
    <h3 class="sub-heading-agileits">Personal Details</h3>
    <div class="main-flex-w3ls-sectns">
      <div class="field-agileinfo-spc form-w3-agile-text1">
        <input type="text" name="Name" placeholder="Full Name" required="">
      </div>
      <div class="field-agileinfo-spc form-w3-agile-text2">
        <input type="text" name="Phone no" placeholder="Phone Number" required="">
      </div>
    </div>
    <div class="field-agileinfo-spc form-w3-agile-text">
      <input type="email" name="Email" placeholder="Email" required="">
    </div>
    <div class="clear"></div>
    <input type="submit" value="Submit">
    <input type="reset" value="Clear Form">
    <div class="clear"></div>
  </form>
  <!--// Form starts here -->
</div>
</body>
</html>

Read Also Building a Responsive Sports Dashboard using HTML, CSS, and JavaScript.jpg

Building a Responsive Sports Dashboard using HTML, CSS, and JavaScript

Step 2 (CSS Code):

Styling the Form with CSS:

Link the CSS file to the HTML document.
Apply CSS styles to enhance the visual appeal of the form.

Let's break down the CSS code:

1. Body Styles:

Sets the font size to 100%.
Sets the background of the body to an image centered at the top with no repeat, covering the entire background.

2. Element Resets:

Sets margins, padding, and borders to 0 for various elements like div, h2, h3, h6, form, and label. This ensures a consistent starting point for styling.
Sets font size to 100% and inherits font properties.

3. List Styles:

Removes default list styles (like bullets) from unordered lists (ul).

4. Clearfix:

Creates a clearfix class to clear floats.

5. Booking Form Styles:

Styles for a booking form container:
Box sizing set to border-box.
Padding set.
Background color set to a semi-transparent black.
Width set to 65% of the container's width.
Centered horizontally (margin: 0 auto).

6. Heading Styles:

Styles for subheadings (h2 and h3) within the booking form:
Displayed as inline-block.
Left-aligned.
Font size, color, text transformation, margin, padding, font weight, letter spacing, and border-bottom specified.

7. Radio Button Section Styles:

Styles for sections containing radio buttons:
Left-aligned.
Margin and text styles specified for h6 tags.

8. Radio Button Styles:

Styles for radio buttons:
Cursor set to pointer.
Font color specified for labels.

9. Input Field Styles:

Styles for various input fields (text, email, textarea, select, datepicker):
Width set to 100%.
Font properties specified.
Background color set to transparent.
Bottom border specified.

10. Submit and Reset Button Styles:

Styles for submit and reset buttons:
Text transformed to capitalize.
Background color, text color, padding, border, font weight, font size, margin, and transition effects specified.
Font family specified.
Different styling for hover state.

11. Placeholder Styles:

Styles for placeholder text in input fields.

12. Responsive Media Queries:

Adjustments to the booking form width and other styles for various screen sizes using media queries.

body {
  font-size: 100%;
  background: url(https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736881_960_720.jpg)
    no-repeat center top;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}

div,
h2,
h3,
h6,
form,
label {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
}
.clear {
  clear: both;
}
.booking-form-w3layouts {
  box-sizing: border-box;
  padding: 3em 3em;
  background: rgba(0, 0, 0, 0.78);
  width: 65%;
  margin: 0 auto;
}
h2.sub-heading-agileits,
h3.sub-heading-agileits {
  display: inline-block;
  text-align: left;
  font-size: 24px;
  color: #fff;
  text-transform: capitalize;
  margin-bottom: 0.4em;
  padding: 0px 25px 10px 0px;
  font-weight: 400;
  letter-spacing: 2px;
  border-bottom: 2px solid #0091cd;
  font-family: "Raleway", sans-serif;
}
.radio-section {
  text-align: left;
  margin: 0.7em 0;
}
.radio-section h6 {
  display: inline;
  margin-top: 10px;
  color: #0091cd;
  font-size: 19px;
  text-transform: capitalize;
  margin-bottom: 0.7em;
  font-weight: 400;
  letter-spacing: 2px;
  font-family: "Raleway", sans-serif;
}
.radio-section ul {
  display: inline;
}
.radio-buttons-w3-agileits li input[type="radio"] {
  cursor: pointer;
}
.radio-buttons-w3-agileits li label {
  color: #fff;
  font-size: 13.5px;
  font-weight: 400;
  letter-spacing: 1px;
  font-family: "Raleway", sans-serif;
}
.booking-form-w3layouts input[type="text"],
.booking-form-w3layouts input[type="email"],
.booking-form-w3layouts textarea,
select.form-control,
input#datepicker {
  width: 100%;
  font-weight: 300;
  color: #fff;
  font-size: 14px;
  letter-spacing: 1.2px;
  padding: 10px 10px;
  outline: none;
  background: rgba(255, 255, 255, 0);
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.27);
  box-sizing: border-box;
  font-family: "Roboto", sans-serif;
}
.booking-form-w3layouts textarea {
  resize: none;
  height: 80px;
}
.field-agileinfo-spc {
  margin-bottom: 1em;
}
.form-w3-agile-text {
  width: 100%;
}
select.form-control option {
  background: #000;
}
.booking-form-w3layouts input[type="submit"],
.booking-form-w3layouts input[type="reset"] {
  text-transform: capitalize;
  background: #0091cd;
  color: #fff;
  padding: 0.5em 4em;
  border: none;
  font-weight: 500;
  font-size: 1.2em;
  margin-top: 1em;
  float: left;
  outline: none;
  letter-spacing: 1px;
  -webkit-transition: 0.5s all;
  -moz-transition: 0.5s all;
  transition: 0.5s all;
  cursor: pointer;
  font-family: "Raleway", sans-serif;
}
.booking-form-w3layouts input[type="submit"] {
  margin-right: 1.5em;
  background: #d2741c;
}
.booking-form-w3layouts input[type="submit"]:hover {
  background: #0091cd;
  color: #fff;
}
.booking-form-w3layouts input[type="reset"]:hover {
  background: #d2741c;
  color: #fff;
}
.booking-form-w3layouts ::-webkit-input-placeholder {
  color: #fff;
}
.booking-form-w3layouts :-moz-placeholder {
  color: #fff;
}
.booking-form-w3layouts ::-moz-placeholder {
  color: #fff;
}
.booking-form-w3layouts :-ms-input-placeholder {
  color: #fff;
}
.booking-form-w3layouts label {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.83);
  letter-spacing: 2px;
  font-weight: 400;
  position: relative;
  margin-bottom: 5px;
  display: inline-block;
  text-transform: capitalize;
}
ul.radio-buttons-w3-agileits li {
  display: inline-block;
  margin: 0em 2em;
}
@media (max-width: 1440px) {
  .booking-form-w3layouts {
    width: 73%;
  }
}
@media (max-width: 1366px) {
  .booking-form-w3layouts {
    width: 75%;
  }
}
@media (max-width: 1280px) {
  .booking-form-w3layouts {
    width: 80%;
  }
}
@media (max-width: 1080px) {
  .booking-form-w3layouts {
    width: 83%;
    padding: 2em 2.2em;
  }
}
@media (max-width: 1024px) {
  h2.sub-heading-agileits,
  h3.sub-heading-agileits {
    font-size: 22px;
    padding: 0px 20px 7px 0px;
  }
  .field-agileinfo-spc {
    margin-bottom: 0.8em;
  }
  .booking-form-w3layouts input[type="submit"],
  .booking-form-w3layouts input[type="reset"] {
    padding: 0.5em 3em;
    font-size: 1.1em;
  }
}
@media (max-width: 768px) {
  h2.sub-heading-agileits,
  h3.sub-heading-agileits {
    font-size: 21px;
    padding: 0px 15px 7px 0px;
  }
  .radio-section h6 {
    font-size: 17px;
    letter-spacing: 1.5px;
  }
  ul.radio-buttons-w3-agileits li {
    margin: 0em 1em;
  }
}
@media (max-width: 667px) {
  h2.sub-heading-agileits,
  h3.sub-heading-agileits {
    font-size: 19px;
    letter-spacing: 1.5px;
  }
  .booking-form-w3layouts {
    width: 86%;
    padding: 2em 2em;
  }
  .booking-form-w3layouts input[type="text"],
  .booking-form-w3layouts input[type="email"],
  .booking-form-w3layouts textarea,
  select.form-control,
  input#datepicker {
    padding: 8px 10px;
  }
  .field-agileinfo-spc {
    margin-bottom: 0.9em;
  }
  h2.sub-heading-agileits,
  h3.sub-heading-agileits {
    margin-bottom: 0.6em;
  }
}
@media (max-width: 640px) {
  .booking-form-w3layouts input[type="submit"] {
    margin-right: 0.7em;
  }
}
@media (max-width: 600px) {
  .booking-form-w3layouts {
    width: 90%;
  }
  .booking-form-w3layouts input[type="submit"],
  .booking-form-w3layouts input[type="reset"] {
    padding: 0.5em 2em;
  }
}
@media (min-width: 481px) {
  .main-flex-w3ls-sectns {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
  }
  .form-w3-agile-text1,
  .form-w3-agile-text2 {
    flex-basis: 48.5%;
    -webkit-flex-basis: 48.5%;
  }
}
@media (min-width: 737px) {
  .triple-wthree {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
  }
  .form-w3-agile-text11,
  .form-w3-agile-text22,
  .form-w3-agile-text33 {
    flex-basis: 32%;
    -webkit-flex-basis: 32%;
  }
}
@media (max-width: 480px) {
  ul.radio-buttons-w3-agileits li {
    margin: 0em 0.5em;
  }
  .radio-section {
    margin: 1.3em 0 0.7em;
  }
  .booking-form-w3layouts {
    width: 85%;
  }
  ul.radio-buttons-w3-agileits li {
    margin: 1em 0em 0em 0.2em;
    display: block;
  }
  .booking-form-w3layouts input[type="submit"],
  .booking-form-w3layouts input[type="reset"] {
    font-size: 1em;
  }
  .booking-form-w3layouts textarea {
    height: 60px;
  }
  .radio-section {
    margin: 1em 0 0.7em;
  }
}
@media (max-width: 414px) {
  .booking-form-w3layouts {
    width: 90%;
  }
  .booking-form-w3layouts {
    width: 90%;
    padding: 1.5em 1.7em;
  }
}
@media (max-width: 384px) {
  .booking-form-w3layouts input[type="submit"],
  .booking-form-w3layouts input[type="reset"] {
    float: none;
  }
  .booking-form-w3layouts input[type="submit"] {
    margin-right: 0em;
  }
}
@media (max-width: 320px) {
  .booking-form-w3layouts {
    width: 93%;
    padding: 1.3em 1.5em;
  }
  h2.sub-heading-agileits,
  h3.sub-heading-agileits {
    font-size: 18px;
    letter-spacing: 1.4px;
    padding: 0px 12px 5px 0px;
  }
}

Final Output:

Create a User-Friendly Airline Booking Form with HTML and CSS.gif

Read Also Create a Random Joke Generator with HTML, CSS, and JavaScript.jpg

Build an Interactive Joke Generator for Your Website

Conclusion:

Creating an airline booking form with HTML and CSS is a rewarding endeavor that enhances the user experience and simplifies the flight reservation process. By following the steps outlined in this guide, developers can craft intuitive and efficient forms for seamless travel booking experiences.

Code by: Dimmby

That’s a wrap!

I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks!
Faraz 😊

Tags: airline booking form, html, css, user interface design, web development, source code, how to create an airline booking form with html and css, user-friendly airline reservation form tutorial, html/css form design for flight bookings, building a responsive airline booking form

End of the article